{% load i18n static simpletags %}
<link rel="stylesheet" href="{% static 'admin/simplepro/css/home.css' %}">
<script type="text/javascript" src="{% static 'admin/simplepro/echarts/echarts.min.js' %}"></script>
<div class="home-body">

    {% block quick %}
        {% include 'admin/parts/quick.html' %}
    {% endblock %}
{##}
{#    {% block chart_cards %}#}
{#        {% include 'admin/parts/charts_cards.html' %}#}
{#    {% endblock %}#}
    {##}
    {#    {% block line_chart %}#}
    {#        {% include 'admin/parts/line_chart.html' %}#}
    {#    {% endblock %}#}
    {# 这是simple UI 的推广内容 #}
    {#    {% block info %} #}
    {#       {% include 'admin/parts/info.html' %}#}
    {#    {% endblock %}#}

    {# 自定义图表 #}
    <script type="text/javascript">
        var option1 = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['感染人数', '健康人数', '密切接触人数']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '感染人数',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '密切接触人数',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [10020, 13200, 10001, 13400, 9000, 23000, 21000]
                },
                {
                    name: '健康人数',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [22000, 18200, 19100, 23400, 29000, 33000, 31000]
                },
            ]
        };
    </script>

    <echarts :option="option1" style="width: 100%;height: 300px"></echarts>

    <div style="height: 80px"></div>
</div>
<el-backtop target=".home-body"></el-backtop>